<template>
  <div @click="fatherFn" class="father">
    <!-- 在事件后面增加.修饰符,使用更多功能 阻止冒泡,阻止默认行为 修饰符可以连续使用-->
    <button @click.stop="btn">阻止事件冒泡</button>
    <a @click.prevent.stop="btn" href="http://www.baidu.com">去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn() {
      console.log('点击父级了')
    },
    btn() {
      console.log('点击按钮了');
    }
  }
}
</script>

<style>
.father {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
}
</style>